<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>政务服务-首页</title>
		<link href="client/css/mui.min.css" rel="stylesheet" />
		<link href="client/css/build.css" rel="stylesheet" type="text/css" />
		<script src="client/js/mui.min.js"></script>
		<script src="client/js/jquery-1.12.4.min.js"></script>
		<script src="client/js/echarts.min.js"></script>
		<style>
			#search{
				background: url("client/images/user-fangda.png") no-repeat 2px;
			}
		</style>
	</head>
	<body>
		<div class="mui-content">
			<div class="mui-control-content mui-active">
				<form method="get" action="/selectClauseTitleByCondition" style="width: 80%;margin: 0px auto;margin-top: 20px;">
					<input type="text" name="condition" id="search" placeholder="请输入搜索内容" style="width: 70%;margin: 0;padding-left: 40px" th:value="${condition}">
					<input style="margin-left: 5%" type="submit" value="查询">
				</form>
				<!-- 综合查询 start -->
				<div class="padding_0_15">
					<div class="title flex-space-between flex-between-center">
						<h2 th:text="${catalog}">条款列表</h2>
					</div>
					<div class="all_query work_warn padding_0_15">
						<ul>
							<li th:each="clause:${clauses}"><a th:href="@{/showClause(id=${clause.id},catalogId=${clause.catalogId})}"><span th:text="${'第'+clause.clause+'条'}"></span>&nbsp;&nbsp;<span th:text="${clause.titel}"></span></a></li>
						</ul>
					</div>
				</div>
				<!-- 综合查询 end -->
				
				<!-- 底部信息-->
				<div class="footer_box">
					<div class="footer_txt">
						<p>版权所有：中国民用航空局</p>
						<p>ICP备案编号：京ICP备19046468号</p>
					</div>
				</div>				
			</div>

			<!-- 底部tabbar    start -->
			<nav class="mui-bar mui-bar-tab tabbar-bottom">
				<a class="mui-tab-item mui-active" onclick="window.location.href='/selectAllLaws'">
					<span class="mui-icon"><img src="client/images/nav_home_on.png" /></span>
					<span class="mui-tab-label">首页</span>
				</a>
				<a class="mui-tab-item" onclick="window.location.href='/hudongAdd'">
					<span class="mui-icon"><img src="client/images/nav_hudong.png" /></span>
					<span class="mui-tab-label">咨询</span>
				</a>
				<a class="mui-tab-item" onclick="window.location.href='user.html'">
					<span class="mui-icon"><img src="client/images/nav_user.png" /></span>
					<span class="mui-tab-label">我的</span>
				</a>
			</nav>
			<!-- 底部tabbar    end -->
			<script src="client/js/echart_tab.js"></script>
			<script type="text/javascript">
				mui.init();
				
				// 系统公告滚动
				$(document).ready(function(){
					var timer;
					//滚动文字
					function runtxt(){
						$(".scrollnews ul").animate({marginTop:"-40px"},300,
							function(){
								$(".scrollnews ul li:last").after($(".scrollnews ul li:first"))
								$(".scrollnews ul").css("margin-top",0)
							}
						)
					}   
					var t=$(".scrollnews ul li").length;
					if(t==1){
						clearInterval(timer)
					}else{
						timer=setInterval(runtxt,5000);
					}
				})

				$("#shoucang").click(function () {
					let clauseId = $("#clauseId").val();
					$.ajax({
						url: "/addCollect",
						type : "post",
						data:{clauseId:clauseId},
						success: function (result) {
							if(result==1){
								alert("收藏成功")
							}else {
								alert("收藏失败")
							}
						}
					});
				});
				
				//统计分析标题tab
				$(document).ready(function(){
					$("#tab_title li").mousedown(function(){
						var t=$(this).index();
						$(this).addClass("cur");
						$(this).siblings().removeClass("cur");
						$("#tab_box .con_box").hide().eq(t).show().css("height","auto");
					})
				})
				
				//办件统计柱状图
				var dom = document.getElementById("bjtj_c");
				var myChart = echarts.init(dom);
				var app = {};
				option = null;
				option = {
				    legend: {
						"textStyle": {
							"fontSize": 10
						},
						"top": "5%",
						"itemHeight": 10,
						"itemWidth": 15
					},
				    tooltip: {},
				    dataset: {
				        dimensions: ['product', '类型1', '类型2', '类型3'],
				        source: [
				            {product: '2018', '类型1': 43, '类型2': 85, '类型3': 93},
				            {product: '2019', '类型1': 83, '类型2': 73, '类型3': 55},
				            {product: '2020', '类型1': 86, '类型2': 65, '类型3': 82}
				        ]
				    },
				    xAxis: {type: 'category'},
				    yAxis: {},
				    // Declare several bar series, each will be mapped
				    // to a column of dataset.source by default.
				    series: [
				        {
							type: 'bar',
							"barWidth":20
						},
				        {
				        	type: 'bar',
				        	"barWidth":20
				        },
						{
							type: 'bar',
							"barWidth":20
						}
						
				    ]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				}
			</script>
		</div>
	</body>
</html>
